﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 点我购票 </title>
    <!-- favicon -->
    
    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- animate.css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!-- magnific popup css -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- slick css -->
    <link rel="stylesheet" href="assets/css/slick.min.css">
    <!-- stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
	 .breadcumb-area.breadcrumb-bg {
    background-image: url(assets/img/bg/bg11.jpg);
    background-position: center;
    background-size: cover; }
</style>
<body>

      <!-- ============Start Navigation ===== -->
    <nav class="navbar navbar-area navbar-expand-lg navbar-light bg-zoo">
        <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand logo" href="index.html">
                <img src="assets/img/logo.png" alt="logo image">
            </a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
             
                <li class="nav-item">
                    <a class="nav-link" href="index.html">主页 </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="探索海洋.html">探索海洋</a>
                </li>
               
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        鲸彩活动
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="热点新闻.html">热点新闻</a>
                        <a class="dropdown-item" href="馆内活动.html">馆内活动</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="出行锦囊.html">出行锦囊</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="联系我们.html">联系我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="个人中心.html">个人中心</a>
                </li>
                
            </ul>          
        </div>
        <div class="right-btn-wrapper">
            <a href="ticket.html" class="boxed-btn"> <i class="fas fa-ticket-alt"></i>点我购票</a>
        </div>

        </div>
    </nav> 
    <div class="body-overlay" id="body-overlay"></div>
    <div class="search-popup" id="search-popup">
        <form action="index.html" class="search-popup-form">
            <div class="form-element">
                <input type="text" class="input-field" placeholder="Search.....">
            </div>
            <button type="submit" class="submit-btn"><i class="fas fa-search"></i></button>
        </form>
    </div>


<!-- Breadcumb area start  -->
<section class="breadcumb-area breadcrumb-bg">
    <div class="container">
        <div class="row ">
            <div class="col-lg-12">
                <div class="breadcumb-inner">
                    <h2 class="title">点我购票</h2>
                    <ul class="page-list">
                        <li><a href="index.html" style="color: orange;">返回主页</a></li>
                        <li>点我购票</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- Breadcumb area end  -->
<div id="app">
  <el-table
          :data="tableData"

          style="width: 100%"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{textAlign: 'center'}">

    <el-table-column
            prop="seaBookingName"
            label="订票名"
            width="200">
    </el-table-column>
    <el-table-column
            prop="remainNumber"
            label="剩余数量"
            width="200">
    </el-table-column>
    <el-table-column
            prop="bookingTime"
            label="有效期"
            width="300">
    </el-table-column>
    <el-table-column

            prop="adultPrice"
            label="成人票/价格"
            width="400">
    </el-table-column>
    <el-table-column

            prop="childPrice"
            label="儿童票/价格"
            width="400">
    </el-table-column>
    <el-table-column fixed="right" label="购买" width="180">
      <template #default="scope">
        <!--        插槽名.row可以获取一行的内容，-->
        <!--        如果要获取行的索引，使用插槽名.$index，注意$符号是必不可少的，否则将不起作用。-->
        <el-button type="text" size="small" @click="handleEdit(scope.row)">购买门票</el-button>
      </template>

    </el-table-column>
  </el-table>

  <el-dialog :visible="dialogVisible" :title=title width="30%">

    <!--      创建表单 弹窗里面的表单-->
    <el-form :model="form" label-width="120px">
      <el-form-item label="票名">
        <el-input v-model="form.seaBookingName" style="width: 80%" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="剩余票数">
        <el-input v-model="form.remainNumber" style="width: 80%" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="有效期">
        <el-input v-model="form.bookingTime" style="width: 80%" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="成人票/价格">
        <el-input  v-model="form.adultPrice" style="width: 80%" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="儿童票/价格">
        <el-input v-model="form.childPrice" style="width: 80%" readonly disabled></el-input>
      </el-form-item>
      <el-form-item label="成人票/数量">
        <el-input v-model="form.adultNumber" style="width: 80%" placeholder = "请输入购买数量"></el-input>
      </el-form-item>
      <el-form-item label="儿童票/数量">
        <el-input v-model="form.childNumber" style="width: 80%" placeholder = "请输入购买数量"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">提交</el-button>
        </span>
    </template>
  </el-dialog>


  <div style="margin: 10px 0">
    <el-pagination
            v-model:currentPage="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</div>



<!-- footer area start -->
<footer class="footer-area footer-bg">
		<div class="footer-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="footer-widget about">
                            <div class="widget-title">
                                <div class="footer-logo">
                                    <a href="index.html"><img src="assets/img/footer-logo.png" alt="footer logo"></a>
                                </div>
                            </div>

                            <div class="widget-body">
                                <p>地址：辽宁省大连市旅顺口区大连交通大学旅顺校区 </p>
                                <p class="call-us">17866535753</p>
                                <p>E.mail：1511347324@qq.com</p>
                                
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 col-sm-6">
                       <div class="footer-widget">
                            <div class="widget-title">
                                <h3 class="title">快速导航</h3>
                            </div>
                           <div class="widget-body">
                                <ul class="footer-links">
                                    <li> <a href="探索海洋.html "><img src="assets/img/footer-icon.png" alt=""> 探索海洋 </a></li>
                                    <li> <a href="热点新闻.html"><img src="assets/img/footer-icon.png" alt=""> 热点新闻 </a></li>
                                    <li> <a href="馆内活动.html"><img src="assets/img/footer-icon.png" alt=""> 馆内活动 </a></li>
                                    <li> <a href="出行锦囊.html"><img src="assets/img/footer-icon.png" alt=""> 出行锦囊 </a></li>
                                    <li> <a href="联系我们.html"><img src="assets/img/footer-icon.png" alt=""> 联系我们 </a></li>
                                    <li> <a href="个人中心.html"><img src="assets/img/footer-icon.png" alt=""> 个人中心 </a></li>
                                </ul>
                           </div>
                       </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                       <div class="footer-widget">
                            <div class="widget-title">
                                
                            </div>
                           <div class="widget-body">
                                
                           </div>
                       </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="footer-widget contact-info">
                            <div class="widget-title">
                                    <h3 class="title">精彩看点</h3>
                            </div>
                            <div class="widget-body">
                                <ul class="instagram-img">
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/1.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/2.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/3.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/4.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/5.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/6.jpg"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div><!--footer top end-->
    <div class="copyright-area"><!--copyright area start-->
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    &#169; <span class="zoo-color">阿淋海洋世界</span> 2022. 1821030107郑博淋.
                </div>
                <div class="col-lg-6">
                    <ul class="copyright-links"> 
                        <li> <a href="#">个人中心</a></li>
                        <li> <a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div><!-- /.row-->
        </div> <!-- /.container -->
    </div> <!--copyright area end-->
</footer>
<!-- footer area end -->

<!-- back to top start -->
<div class="back-to-top">
    <!-- back to top start -->
    <i class="fas fa-rocket"></i>
</div>
<!-- back to top end -->

<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="loader loader-1">
        <div class="loader-outter"></div>
        <div class="loader-inner"></div>
    </div>
</div>
<!-- preloader area end -->


<!-- jquery -->
<script src="assets/js/jquery.js"></script>
<!-- bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- owl carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- wow js-->
<script src="assets/js/wow.min.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.js"></script>
<!-- slick js-->
<script src="assets/js/slick.min.js"></script>
<!-- filterizr js-->
<script src="assets/js/jquery.filterizr.min.js"></script>

<!-- main -->
<script src="assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script type="text/javascript">


        var app = new Vue({
          el: '#app',
          data(){
            return{
              tableData: [],
              search :'',
              currentPage : 1,
              pageSize :3,
              total :0,
              option:'',
              title:'',
              dialogVisible: false,
              form:{},
              user :JSON.parse(sessionStorage.getItem('user'))

            }

          },
          methods:{

            load(){
              axios.get("http://localhost:8090/booking",{
                params: {
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                  search: this.search,
                  option :this.option

                }
              }).then(res=>{
                console.log(res)
                this.tableData = res.data.data.records
                this.total = res.data.data.total
              })
            },
            handleSizeChange(pageSize){
              this.pageSize = pageSize
              this.load()

            },
            //改变当前页 element-plus提供了改变之后pageSize的值
            handleCurrentChange(pageNum){

              this.currentPage = pageNum
              this.load()

            },
            handleEdit(row) {
              row.adultNumber =''
              row.childNumber=''
              row.userid = this.user.userId
              row.username = this.user.username
              this.title = '购票'
              this.form = JSON.parse(JSON.stringify(row))
              this.dialogVisible = true

            },
            save() {
              console.log(this.form)
              axios.post('http://localhost:8090/booking/userShop', this.form, {
                params: {
                  adultNumber : this.form.adultNumber,
                  childNumber: this.form.childNumber,
                  userid:this.form.userid,
                  username: this.form.username,
                  bookingName : this.form.seaBookingName
                }
              }).then(res => {
                console.log(res);
                if (res.data.code == '0') {
                  this.$message({
                    type: 'success',
                    message: '购票成功'
                  })
                  this.dialogVisible = false
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg
                  })
                }
                this.form = {}
                this.dialogVisible = false
                this.load()
              })

            }


          },
          created(){
            this.load();
          }
        });
</script>
</body>

</html>
